<template>
<div class="message-containr">
<div class="data-from-container">
    <Datafrom v-on="$listeners"></Datafrom>
</div>
<div class="title">
    <h3>{{title}}</h3>
<span>{{`(${subTitle})`}}</span>
</div>

    <div class="data-list-container">
        <Datalist :list="list"></Datalist>
    </div>
    <div   class="loading-container"  v-loading='isListLoading' ></div>
</div>
</template>

<script>
import Datafrom from './Datafrom.vue';
import Datalist from './Datalist.vue';
export default {
    components: { Datafrom, Datalist },
    props:{
        title:{
            type: String,
            default:"''",
        },
        subTitle:{
            type: Number,
            default:0,
        },
        list:{
            type: Array,
            default:()=>[],
        },
        isListLoading:{
            type:Boolean,
            default:false,
        }
    }
}
</script>

<style lang="less" scoped>
 .message-containr{
     position: relative;
     padding: 10px;
     width: 100%;
     height: 100%;
     .title{
         margin: 20px 0;
         h3{
        //   margin: 0;
        display: inline;
         }
        span{
            //  display: inline;
            margin-left: 10px;
         }
     }
     .loading-container{
         width: 100%;
         height: 100px;
     }
 }
</style>